<template>
    <v-tabs
        v-model="tab"
        :items="navigation"
        align-tabs="center"
        height="60"
    >
      <template v-slot:tab="{ item }">
        <v-tab
            :prepend-icon="item.icon"
            :text="item.title"
            :value="item.value"
            class="text-none"
            @click="navigate(item.route)"
        ></v-tab>
      </template>
    </v-tabs>
</template>
<script lang="ts" setup>
const {appPageContent}=storeToRefs(useAppStore())
const tab = ref('home')
const navigation = computed(()=>{
  if(isValidJson(appPageContent.value.home_navigation)){
    return JSON.parse(appPageContent.value.home_navigation)
  }else {
    return []
  }
})

const navigate = (route:string)=>{
  if(route.startsWith('http')){
    window.open(route,'_blank')
  }else{
    navigateTo(route)
  }
}


</script>

